<template>
  <div class="discuss">
    <p style="font-size:16px">小组讨论区</p>
      <span style="font-size:12px">
          欢迎分享，鼓励原创，无论是你的学习体验、想法、工作生活经验，还是好书、好文章、好资源，都可发在这里。
      </span>
      <div style="height:40px;border-bottom:1px solid rgba(217,219,221,1);">
          <Button type="primary" @click="discussModal = true, expand = null" style="float:right;color:#fff;">{{ $t('langObj.discuss') }}</Button>
      </div>
      <mavon-md
        ref="mavonMd"
        class="md-shadow"
        :bindClass="true"
        :show="discussModal"
      >
        <template v-slot:btn-group>
          <div class="bt-group">
            <Button type="primary" @click="submitResultModal">提交</Button>
            <Button @click="quit">退出</Button>
          </div>
        </template>
      </mavon-md>
      <div>
        <discuss-list v-for="(item,index) in allDiscussArr" :key="index" :item="item"
          @emitLike="emitLike"
          @emitDel="emitDel"
          @emitExpand="emitExpand"
        >
          <template v-if="item.id === expand" v-slot:reply>
            <reply-list v-for="(item,index) in replyArr" :key="index" :item="item"></reply-list>
            <div class="md-reply-wrapper" v-if="loading">
              <mavon-md ref="replyMd" :show="true" class="md-reply" >
                <template v-slot:btn-group>
                  <Button type="primary" @click="addReply(item.id)" class="md-reply-button">回复</Button>
                </template>
              </mavon-md>
            </div>
          </template>
        </discuss-list>
      </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import discussList from '@/components/competitions/discussList';
import replyList from '@/components/competitions/replyList';
import mavonMd from '@/components/mavonMd/mavonMd';
export default {
  props:['id'],
  components:{ discussList,replyList,mavonMd },
  data(){
    return{
      discussModal: false,
      expand: null,
      loading:false,
      allDiscussArr: [],
      replyArr:[],
    }
  },
  methods:{
    ...mapActions(['XcompDiscussList','XcompDiscussDel','XcompDiscussAdd','XcompDiscussVote','XcompDiscussReply','XcompDiscussReplyAdd']),
    quit(){
      this.discussModal= false
    },
    submitResultModal(){
      let content = this.$refs.mavonMd.content
      if(content){
        this.XcompDiscussAdd({
          content,
          competitionId: this.id
        }).then(res => {
          this.$Message.success("提交成功");
          this.discussModal = false;
          this.mountDiscussList();
        }).catch(err => {
          this.$Message.error(err.response.data.message);
        })
      }
    },
    emitLike(id){
      this.XcompDiscussVote(id).then(res => {
        this.mountDiscussList();
      })
    },
    emitDel(id){
      this.XcompDiscussDel(id).then(res => {
        this.$Message.success("删除成功");
        this.mountDiscussList();
      })
    },
    emitExpand(id){
      this.replyArr = []
      this.loading = false
      if(!this.expand){
        this.expand = id;
        this.XcompDiscussReply(id).then(res => {
          this.replyArr = res.data
          this.loading = true
        }).catch(err => {
          this.$Message.error(err.response.data.message);
        })
      }else{
        this.expand = null;
      }
    },
    addReply(id){
      let content = this.$refs.replyMd[0].content;
      if(content){
        this.XcompDiscussReplyAdd({
          commentsId: id,
          content
        }).then(res => {
          this.$Message.success("回复成功");
          this.XcompDiscussReply(id).then(res => {
            this.replyArr = res.data
            this.$refs.replyMd[0].content = ""
          }).catch(err => {
            this.$Message.error(err.response.data.message);
          })
        })
      }
    },
    mountDiscussList(){
      this.XcompDiscussList(this.id).then(res => {
        this.allDiscussArr = res.data
      }).catch(err => {
        this.$Message.error(err.response.data.message);
      })
    }
  },
  mounted(){
    this.mountDiscussList()
  }
}
</script>
<style lang="scss">
  .md-reply{
    .v-note-wrapper{
      min-height: 150px !important;
    }
  }
</style>

<style lang="scss" scoped>
  .discuss{
    margin-top: 20px;
    padding: 30px;
  }
  .md-shadow{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(55,55,55,.6);
  }
  .bt-group{
    position: absolute;
    left:50%;
    top:80%;
    transform:translateX(-50%);
    button + button{
      margin: 20px;
    }
  }
  .md-reply-wrapper{
    padding: 20px;
    background-color: rgba(55,55,55,.6);

    .md-reply-button{
      float: right;
      margin-top: 15px;
    }
  }

  .md-reply-wrapper::after{
    clear: both;
    content: "";
    display: block;
  }
</style>